<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/index.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link rel='stylesheet' href='https://unicons.iconscout.com/release/v2.1.9/css/unicons.css'>
    <link rel="stylesheet" type="text/css" href="css/foot.css" />
    <link href="css/index01.css" rel="stylesheet">
    <link href="css/loading.css" rel="stylesheet" type="text/css">
    <style>
        html {
            font-family: 微软雅黑, serif;
            color: #333333;
        }

        a {
            color: #1D8CE0;
            cursor: pointer;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script>
        function login(){
            if (document.getElementById("login").style.display==="none") {
                document.getElementById("login").style.display="block";
            }else {
                document.getElementById("login").style.display="none";
            }
        }
    </script>
</head>
<body style="background: #eee;">
<div class="container" style="width: 100%;margin: 0px;padding:0;border: none  ">
    <!--default默认主题 暗色调inverse-->
    <nav class="navbar navbar-default" style="background: #ddd">
        <div class="navbar-header col-md-1" style="margin-right:10px;">
            <a href="#" class="navbar-brand">悦知</a>
        </div>
        <div id="nav1" class="collapse navbar-collapse col-md-12">
            <ul class="nav navbar-nav">
                <!--active加深-->
                <li><a href="index.html">首页</a></li>
                <li><a href="questionbank.html">题库广场</a></li>
                <li><a href="programeonline.html">在线编译</a></li>
                <li><a href="testinfo.html">能力测试</a></li>
                <li><a href="#">排行榜</a></li>
                <li><a href="personinfo.html"style="margin-left: 720px">个人中心</a></li>
            </ul>
            <!--搜索框-->
            <form action="" class="navbar-form navbar-right" >
                <input type="text" placeholder="搜索" class="form-control"/>
                <a class="btn btn-primary">搜索</a>
            </form>
        </div>
    </nav>
</div>

<div style="margin-left: 18%;display: flex">
<!--    导航栏-->
    <div style="height: 600px;width: 10%;margin: 10px">
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a()">首页</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a1()">我的考试</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a2()">错题集</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a3()" >我的收藏</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a4()">我的任务</button>
        <button class="btn-info" style="width: 100%;border:none;height: 50px;" onclick="a5()">信息修改</button>
    </div>
    <div id="a1" style="height: 600px;width: 65%;background:white;margin:10px;padding: 20px;border-radius: 5px" >
        <div style="width: 100%;display: flex">
            <img src="img/athor.jpg" alt="" width="100px" height="100px" style="margin-right: 20px">
            <div style="width: 300px;">
                <h4 style="line-height: 50px">Tinamua</h4>
                <div style="line-height: 30px;">等级:5</div>
                <div style="line-height: 30px;">成就:刷题达人</div>
            </div>
            <button style="width: 100px;height: 30px;margin-left:46%;" onclick="a5()">修改个人信息</button>

        </div>
        <div style="margin-top: 20px;background:#eee;height:200px">
            <h4>任务</h4>

        </div>
        <div style="margin-top: 20px;background: #eee;height:200px">
            <h4>最近成绩</h4>

        </div>

    </div>
    <div id="a2" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <table class="table table-striped">
            <caption>考试成绩</caption>
            <thead>
            <tr>
                <td>考试名称</td>
                <td>考试成绩</td>
                <td>用时</td>
                <td>考试日期</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>
            <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>          <tr>
                <td>Java测试一</td>
                <td>100</td>
                <td>56分钟</td>
                <td>2020-02-02</td>
            </tr>


            </tbody>
        </table>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a3" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <table class="table">
            <caption>错题集</caption>
            <thead>
            <tr>
                <th>题目类型</th>
                <th>题目内容</th>
                <th>时间</th>
                <th>答案</th></tr>
            </thead>
            <tbody>
            <tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr>
            <tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr><tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr>
            <tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr>
            <tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr>
            <tr class="active">
                <td>选择题</td>
                <td>基于大苏打鄂塞嗯嗯得</td>
                <td>2020-02-02</td>
                <td>D</td>
            </tr>
            </tbody>
        </table>
        <ul>
            <li>
                <ul class="pagination" style="padding-left: 40%;padding-top: 0px;">
                    <li><a href="#">&laquo;</a></li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="a4" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        1士大夫
    </div>
    <div id="a5" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        水电费
    </div>
    <div id="a6" style="height: 600px;width: 65%;background:white;margin:10px;display: none;padding: 20px;border-radius: 5px">
        <div style="display: flex;background: #eee;padding: 20px;">
            <div><img src="img/athor.jpg" alt="" width="100px" height="100px" style="margin-right: 20px"><div> <a href="">修改头像</a></div></div>
            <div style="padding-left: 5%;padding-bottom: 30px">
                <div><span style="line-height: 50px">昵称</span><input type="text" class="input-group" style="height: 30px;width: 200px;border: none"></div>
                <div><span style="line-height: 50px">手机号码</span><input type="text" class="input-group"style="height: 30px;width: 200px;border: none"></div>
                <div><span style="line-height: 50px">修改密码</span><input type="text" class="input-group"style="height: 30px;width: 200px;border: none"></div>
                <div><span style="line-height: 50px">修改生日</span><input type="date" class="input-group"style="height: 30px;width: 200px;border: none"></div>
                <div><span style="line-height: 50px">修改地址</span><input type="text" class="input-group"style="height: 30px;width: 200px;border: none"></div>
            </div>
        </div>


        <button class="btn-success" style="width: 100px;height: 50px;border: none;float: right">确认</button>

    </div>

</div>

<script>
    function a(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="block"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a1(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="block"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a2(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="block"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a3(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="block"
        a4.style.display="none"
        a5.style.display="none"
    }
    function a4(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="block"
        a5.style.display="none"
    }
    function a5(){
        let a = document.getElementById("a1");
        let a1 = document.getElementById("a2");
        let a2 = document.getElementById("a3");
        let a3 = document.getElementById("a4");
        let a4 = document.getElementById("a5");
        let a5 = document.getElementById("a6");
        a.style.display="none"
        a1.style.display="none"
        a2.style.display="none"
        a3.style.display="none"
        a4.style.display="none"
        a5.style.display="block"
    }
</script>


<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</body>
</body>
</html>